Se scorri giù questa pagina puoi vedere che quando qualcosa passa dietro alla barra diventa sfocato, questo è fatto utilizzando backdrop-filter:blur(0.5rem) sulla barra assieme a uno sfondo semitrasparente. Questo crea un effetto vetroso.
Nota: non tutti i browser lo supportano.
Siccome la barra è disegnata davanti a tutto, dobbiamo spostare in giù di qualche rem il contenuto della pagina. Per farlo mettiamo tutto il contenuto (a parte la barra) in un div con id principale e gli diamo un margin-top di qualche rem per spostarlo giù.
L'HTML della barra di navigazione va copiato su tutte le pagine del sito, nulla vi vieta di avere versioni leggermente diverse della barra sulle varie pagine (ad esempio cambiare i colori o i link)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt metus ex, lacinia pharetra quam varius vel. Ut ultricies, libero sed consectetur pulvinar, mi urna euismod libero, in molestie libero quam non tortor. In semper odio sed velit pharetra sollicitudin. Donec quis dictum erat, ac vulputate massa. Sed aliquet, sem in cursus vulputate, felis ipsum tristique lectus, sed tempus elit felis rhoncus libero. Mauris a feugiat dui. Quisque in elit id augue efficitur fringilla. Integer vestibulum imperdiet congue. Quisque ut tempor nulla. Phasellus et nibh urna.
Ut viverra ex sed orci tincidunt vehicula. Morbi ornare augue sit amet sagittis suscipit. Vestibulum imperdiet euismod faucibus. Nunc ornare ullamcorper metus a aliquet. Pellentesque sagittis, urna sed scelerisque tristique, nunc orci dapibus lorem, et dictum lectus ligula at neque. Quisque id arcu eget libero sollicitudin ultricies ac ac purus. Donec sed ex leo. Maecenas id sapien et neque interdum aliquet id ut magna. Curabitur facilisis sed augue id tristique. Curabitur nec velit laoreet, suscipit quam nec, sodales dui. Aliquam quis odio eleifend tellus rutrum elementum. Curabitur ac odio non libero faucibus vestibulum quis at purus. Quisque interdum sollicitudin risus et vehicula. Aenean elementum a augue quis maximus.
Vestibulum ullamcorper, nunc nec venenatis aliquam, risus diam molestie massa, ac euismod elit magna at urna. Sed vehicula, urna vitae cursus efficitur, lorem justo ultricies mi, id convallis felis ante a lectus. In vitae tellus facilisis, facilisis sem nec, ullamcorper lacus. Vestibulum fringilla at augue in rutrum. Nunc suscipit lectus dolor. In et semper lorem. Nunc eget feugiat nisi. Aliquam erat volutpat. Morbi finibus ut lacus non vehicula.
Mauris quis odio condimentum, maximus elit vitae, rutrum nulla. Aliquam ac congue justo, vitae pretium lacus. Nam elementum lacus mi, vitae convallis elit gravida elementum. Nullam nunc elit, maximus vel eleifend vel, posuere at massa. Vivamus feugiat ut dolor a dictum. Donec varius sapien lacus, in volutpat quam hendrerit in. In hac habitasse platea dictumst. Curabitur accumsan enim sed scelerisque elementum. Mauris at enim pretium nisl tempus placerat. Vivamus lectus velit, iaculis eget consequat vel, maximus quis velit.
Curabitur scelerisque pellentesque ligula ut condimentum. Integer vulputate maximus elit, sed fringilla dolor interdum ut. Nam non ante commodo, volutpat elit id, viverra neque. Donec vehicula consequat egestas. Etiam feugiat varius augue. Morbi lacinia velit porta, tempus augue ut, pellentesque nisi. Suspendisse sagittis nunc eget ex euismod, quis fermentum dui blandit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt metus ex, lacinia pharetra quam varius vel. Ut ultricies, libero sed consectetur pulvinar, mi urna euismod libero, in molestie libero quam non tortor. In semper odio sed velit pharetra sollicitudin. Donec quis dictum erat, ac vulputate massa. Sed aliquet, sem in cursus vulputate, felis ipsum tristique lectus, sed tempus elit felis rhoncus libero. Mauris a feugiat dui. Quisque in elit id augue efficitur fringilla. Integer vestibulum imperdiet congue. Quisque ut tempor nulla. Phasellus et nibh urna.
Ut viverra ex sed orci tincidunt vehicula. Morbi ornare augue sit amet sagittis suscipit. Vestibulum imperdiet euismod faucibus. Nunc ornare ullamcorper metus a aliquet. Pellentesque sagittis, urna sed scelerisque tristique, nunc orci dapibus lorem, et dictum lectus ligula at neque. Quisque id arcu eget libero sollicitudin ultricies ac ac purus. Donec sed ex leo. Maecenas id sapien et neque interdum aliquet id ut magna. Curabitur facilisis sed augue id tristique. Curabitur nec velit laoreet, suscipit quam nec, sodales dui. Aliquam quis odio eleifend tellus rutrum elementum. Curabitur ac odio non libero faucibus vestibulum quis at purus. Quisque interdum sollicitudin risus et vehicula. Aenean elementum a augue quis maximus.
Vestibulum ullamcorper, nunc nec venenatis aliquam, risus diam molestie massa, ac euismod elit magna at urna. Sed vehicula, urna vitae cursus efficitur, lorem justo ultricies mi, id convallis felis ante a lectus. In vitae tellus facilisis, facilisis sem nec, ullamcorper lacus. Vestibulum fringilla at augue in rutrum. Nunc suscipit lectus dolor. In et semper lorem. Nunc eget feugiat nisi. Aliquam erat volutpat. Morbi finibus ut lacus non vehicula.
Mauris quis odio condimentum, maximus elit vitae, rutrum nulla. Aliquam ac congue justo, vitae pretium lacus. Nam elementum lacus mi, vitae convallis elit gravida elementum. Nullam nunc elit, maximus vel eleifend vel, posuere at massa. Vivamus feugiat ut dolor a dictum. Donec varius sapien lacus, in volutpat quam hendrerit in. In hac habitasse platea dictumst. Curabitur accumsan enim sed scelerisque elementum. Mauris at enim pretium nisl tempus placerat. Vivamus lectus velit, iaculis eget consequat vel, maximus quis velit.
Curabitur scelerisque pellentesque ligula ut condimentum. Integer vulputate maximus elit, sed fringilla dolor interdum ut. Nam non ante commodo, volutpat elit id, viverra neque. Donec vehicula consequat egestas. Etiam feugiat varius augue. Morbi lacinia velit porta, tempus augue ut, pellentesque nisi. Suspendisse sagittis nunc eget ex euismod, quis fermentum dui blandit.
